home *** CD-ROM | disk | FTP | other *** search
/ MacWorld 1999 April / Macworld (1999-04).dmg / Shareware World / Comms & Internet / PageSpinner 2.1 / PageSpinner 2.1 68K / Examples / JavaScript / PopupMenu < prev    next >
Text File  |  1997-10-09  |  3KB  |  66 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Popup Menu</TITLE>
  4. </HEAD>
  5.  
  6. <BODY BGCOLOR=FFFFFF TEXT=000000>
  7. <H1>JavaScript Popup Menu</H1>
  8.  
  9. <B>This page contains popup menu used for selecting a page or URL</B>
  10. <P>
  11. Please note that JavaScript is currently only available in Netscape Navigator 2.0 or later, and in Internet Explorer for MacOS version 3.0.1 or later. <FONT COLOR="931B15">Do not assume that all in your audience are using a JavaScript enabled browser.</FONT>
  12. <HR>
  13. Here is an example on how JavaScript can be used in a form with a popup menu that has links to other pages.
  14. <P>
  15.  
  16. <FORM>
  17. <SELECT NAME="menu">
  18. <OPTION SELECTED VALUE="index.html">Contents 
  19. <OPTION VALUE="groucho.html">Groucho 
  20. <OPTION VALUE="harpo.html">Harpo 
  21. <OPTION VALUE="chico.html">Chico 
  22. <OPTION VALUE="zeppo.html">Zeppo 
  23. </SELECT>
  24.  
  25. <INPUT TYPE=BUTTON VALUE="Go" onClick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value">
  26. </FORM> 
  27. <HR>
  28. NOTE: The pages may fail to load when using this example with Internet Explorer and the pages to be loaded are stored on your local disk. It should work correctly with pages stored on a Web-server though.
  29. <HR>
  30. <P>
  31. <B>How to use</B>
  32. <BLOCKQUOTE>
  33. The source of the popup menu looks like this:
  34. <P>
  35. <PRE><FORM>
  36. <SELECT NAME="menu">
  37. <OPTION VALUE="index.html" SELECTED>Contents 
  38. <OPTION VALUE="groucho.html">Groucho 
  39. <OPTION VALUE="harpo.html">Harpo 
  40. <OPTION VALUE="chico.html">Chico 
  41. <OPTION VALUE="zeppo.html">Zeppo 
  42. </SELECT>
  43.  
  44. <INPUT TYPE=Button VALUE="Go" 
  45. onClick="top.location.href = 
  46. this.form.menu.options[this.form.menu.selectedIndex].value">
  47. </FORM></PRE>
  48. <P>
  49. Change the links and text to be displayed in the menu by editing the lines containing the <CODE>OPTION</CODE> tags. Note that you can also use full URL's in the VALUE attribute.
  50. <P>
  51. Change the text of the button in the Value attribute of <BR>
  52. <CODE> <INPUT TYPE=BUTTON VALUE="Go"</CODE> ...
  53. </BLOCKQUOTE>
  54. <HR>
  55. <P>
  56. <B>Programming notes</B>
  57. <BLOCKQUOTE>
  58. The actual JavaScript is in the button's onClick handler. The JavaScript array <CODE>this.form.menu.options</CODE> is an array of the option tags (with its contents)  in the form named "menu". To find which menu item that is selected we can use the property <CODE>this.form.menu.selectedIndex</CODE>, that holds the index of the selected item.
  59. <P>
  60. We then get the name of the page by accessing the value attribute of the selected  item in the array with the expression <CODE>this.form.menu.options[this.form.menu.selectedIndex].value</CODE>.
  61. <P>
  62. <CODE>top.location.href</CODE> is the address of the url to be displayed in the window. Since we set <CODE>top.location</CODE> to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame. To get a page to be displayed in a specific frame is an exercise left to the reader <FONT SIZE="-2" FACE="Monaco, Courier">;-)</FONT>. (You can also check out the Programming notes for the <A HREF="PopupMenu2">second JavaScript Popup Menu</A> to get a hint).
  63. </BLOCKQUOTE>
  64. </BODY>
  65. </HTML>
  66.